<!-- Goals is begining here -->
<style type="text/css">
    .ui.table thead th,
    tbody td,
    .ui.table tr td p {
        text-align: center;
    }
    
    .dimmers {
        margin-top: 55px !important;
        background-color: rgba(0, 0, 0, .99) !important;
    }
    
    .isblue {
        background: #336EAA !important;
    }
    
    .selected2 {
        background-color: #e4e8e8;
    }
    
    .selected3 {
        background-color: #cff7f7;
    }
</style>
<div class="cont">
    <div class="position "><img alt="位置图标" src="images/position.png" />营销管理&gt;营销目标管理</div>
    <div class="inline fluid fields" style="height: 40px; margin-top: 35px;">
        <div class="field" style="display: inline-block;">
            <div class="ui radio checkbox">
                <input name="frequency1" ng-click="switchType('',2)" type="radio" checked="checked">
                <label>部门</label>
            </div>
        </div>
        <div class="field" style="display: inline-block; margin-left: 40px;">
            <div class="ui radio checkbox">
                <input name="frequency1" ng-click="switchType('',1)" type="radio">
                <label>个人</label>
            </div>
        </div>
        <div class="field" style="display: inline-block; margin-left: 40px;">
            <label>所属部门</label>
            <div class="ui selection dropdown">
                <input type="hidden" name="customer_sector" data-value="{{user.sector_id}}">
                <div class="default text">默认为你的部门</div> <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item" data-value="0" ng-show="sectors.length > 0" ng-click="getGoals()">全部所属部门</div>
                    <div class="item" data-value="{{vitem.sector_id}}" ng-repeat="vitem in sectors|tree2Arr:'_child'" ng-click="switchType('','')">{{vitem.rep}}{{vitem.sector_name}}</div>
                </div>
            </div>
        </div>
        <div class="field" style="display: inline-block; margin-left: 40px;">
            <label>目标年份</label>
            <div class="ui selection dropdown">
                <input type="hidden" id="t_year" data-value="{{nowYear}}">
                <div class="default text">2017年</div> <i class="dropdown icon"></i>
                <div class="menu">
                    <div class="item" data-value="{{nYear}}" ng-repeat="nYear in recentYear" ng-click="getYear()">{{nYear}}年</div>
                </div>
            </div>
        </div>
        <div class="field" style="display: inline-block; float: right;margin-right: 8px;">
            <button class="ui blue isblue button" ng-click="getGoals()" tabindex="0"> <i class="Search"></i>搜索</button>
        </div>
    </div>
    <div style="margin-top: 25px;">
        <div class="inline fluid fields">
            <div class="field" style="display: inline-block;">
                <h3>{{nowYear}}年公司营销目标展示</h3>
            </div>
            <div class="field" style="display: inline-block;float: right;margin-right: 15px;">
                <div class="inline fluid fields">
                    <div class="field" style="display: inline-block;">
                        <div><img alt="不可操作" style="height: 26px;" src="images/1.png" />：不可操作</div>
                    </div>
                    <div class="field" style="display: inline-block;">
                        <div><img alt="可修改" style="height: 26px;" src="images/2.png" />：可修改</div>
                    </div>
                    <div class="field" style="display: inline-block;">
                        <div><img alt="可添加" style="height: 26px;" src="images/3.png" />：可添加</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui top attached tabular menu" style="margin-top: 25px;">
        <a class="active item" data-tab="first" ng-click="switchType(1,'')" style="padding-bottom: 0px;">
            <p>&#12288月度</p>
            <p style="color: red;margin-top: -30px !important;margin-left: 4px;font-size: 10px;">{{goals1.length}}</p>
        </a>
        <a class="item" data-tab="second" ng-click="switchType(2,'')" style="padding-bottom: 0px;">
            <p>&#12288季度</p>
            <p style=" color: red;margin-top: -30px !important;margin-left: 4px;font-size: 10px; ">{{goals2.length}}</p>
        </a>
        <a class="item " data-tab="third " ng-click="switchType(3, '')" style="padding-bottom: 0px;">
            <p>半年度</p>
            <p style="color: red;margin-top: -30px !important;margin-left: 4px;font-size: 10px;">{{goals3.length}}</p>
        </a>
        <a class="item" data-tab="forth" ng-click="switchType(4,'')" style="padding-bottom: 0px;">
            <p>&#12288年度</p>
            <p style=" color: red;margin-top: -30px !important;margin-left: 4px;font-size: 10px; ">{{goals4.length}}</p>
        </a>
    </div>

    <!-- 月度营销目标 is begining here -->
    <div class="ui bottom attached active tab segment " data-tab="first ">
        <table class="ui celled yellow table ">
            <thead>
                <tr>
                    <th></th>
                    <th>1月</th>
                    <th>2月</th>
                    <th>3月</th>
                    <th>4月</th>
                    <th>5月</th>
                    <th>6月</th>
                    <th>7月</th>
                    <th>8月</th>
                    <th>9月</th>
                    <th>10月</th>
                    <th>11月</th>
                    <th>12月</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="vgoal in goals1 ">
                    <td>
                        <div class="ui ribbon label ">{{vgoal.object}}</div>
                    </td>
                    <td ng-repeat="col in vgoal.data" ng-class="{'selected2': {{col.content==2}}, 'selected3': {{col.content==3}}}" style="width: 7.5%;padding: auto;" class="ui repeattd " ng-click="clickGoal()">
                        <p ng-show="{{col.goal}} " style="font-size: 12px; ">营销目标:</p>
                        <p ng-show="{{col.goal}} " style="font-size: 12px; ">{{col.goal}}万</p>
                        <p ng-show="{{col.goal}} " style="font-size: 12px; ">完成情况:</p>
                        <p ng-show="{{col.goal}} " style="font-size: 12px; ">{{(col.achieve/col.goal*100/10000).toFixed(2)}}%</p>
                    </td>
                </tr>
            </tbody>
            <tbody ng-show="!goals1 && !busy " style="color: red;text-align: center;top: 30px; border-top: none;font-size: 16px; ">
                <tr>
                    <td colspan="13">
                        <p style="text-align: center; ">没有找到数据~~~!</p>
                    </td>
                </tr>
            </tbody>
            <tfoot ng-show="goalsPage.pageAll>1">
                <tr>
                    <th colspan="13">
                        <div class="ui pagination menu" jspagination page-object="goalsPage" page-func="getGoals" id="goalsList"></div>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- 月度营销目标 is ending here -->

    <!-- 季度度营销目标 is begining here -->
    <div class="ui bottom attached tab segment" data-tab="second">
        <table class="ui celled yellow table">
            <thead>
                <tr>
                    <th></th>
                    <th>一季度</th>
                    <th>二季度</th>
                    <th>三季度</th>
                    <th>四季度</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="vgoal in goals2">
                    <td>
                        <div class="ui ribbon label">{{vgoal.object}}</div>
                    </td>
                    <td ng-repeat="col in vgoal.data" ng-class="{'selected2': {{col.content==2}}, 'selected3': {{col.content==3}}}" style="width: 22.5%;padding: auto;" class="ui repeattd" ng-click="clickGoal()">
                        <p ng-show="{{col.goal}}" style="font-size: 12px;">目标:{{col.goal}}万</p>
                        <p ng-show="{{col.goal}}" style="font-size: 12px;">完成情况：{{(col.achieve/col.goal*100/10000).toFixed(2)}}%</p>
                    </td>
                </tr>
            </tbody>
            <tbody ng-show="!goals2 && !busy" style="color: red;text-align: center;top: 30px; border-top: none;font-size: 16px;">
                <tr>
                    <td colspan="5">
                        <p style="text-align: center;">没有找到数据~~~!</p>
                    </td>
                </tr>
            </tbody>
            <tfoot ng-show="goalsPage.pageAll >1">
                <tr>
                    <th colspan="5">
                        <div class="ui pagination menu" jspagination page-object="goalsPage" page-func="getGoals" id="goalsList"></div>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- 季度营销目标 is hereing here -->

    <!-- 半年度营销目标 is begining here -->
    <div class="ui bottom attached tab segment" data-tab="third">
        <table class="ui celled yellow table">
            <thead>
                <tr>
                    <th></th>
                    <th>上半年度</th>
                    <th>下半年度</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="vgoal in goals3">
                    <td>
                        <div class="ui ribbon label">{{vgoal.object}}</div>
                    </td>
                    <td ng-repeat="col in vgoal.data" ng-class="{'selected2': {{col.content==2}}, 'selected3': {{col.content==3}}}" style="width: 45%;" ng-click="clickGoal()" class="ui repeattd">
                        <p ng-show="{{col.goal}}" style="font-size: 12px;">目标:{{col.goal}}万</p>
                        <p ng-show="{{col.goal}}" style="font-size: 12px;">完成情况：{{(col.achieve/col.goal*100/10000).toFixed(2)}}%</p>
                    </td>
                </tr>
            </tbody>
            <tbody ng-show="!goals3 && !busy" style="color: red;text-align: center;top: 30px; border-top: none;font-size: 16px;">
                <tr>
                    <td colspan="3">
                        <p style="text-align: center;">没有找到数据~~~!</p>
                    </td>
                </tr>
            </tbody>
            <tfoot ng-show="goalsPage.pageAll >1">
                <tr>
                    <th colspan="3">
                        <div class="ui pagination menu" jspagination page-object="goalsPage" page-func="getGoals" id="goalsList"></div>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- 半年度营销目标 is begining here -->

    <!-- 年度营销目标 is begining here -->
    <div class="ui bottom attached tab segment" data-tab="forth">
        <table class="ui celled yellow table">
            <thead>
                <tr>
                    <th></th>
                    <th>年度</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="vgoal in goals4">
                    <td style="width: 15%;">
                        <div class="ui ribbon label">{{vgoal.object}}</div>
                    </td>
                    <td ng-repeat="col in vgoal.data" ng-show="$index == 0" ng-class="{'selected2': {{col.content==2}}, 'selected3': {{col.content==3}}}" class="ui repeattd" ng-click="clickGoal()">
                        <p ng-show="{{col.goal}}" style="font-size: 12px;">目标:{{col.goal}}万</p>
                        <p ng-show="{{col.goal}}" style="font-size: 12px;">完成情况：{{(col.achieve/col.goal*100/10000).toFixed(2)}}%</p>
                    </td>
                </tr>
            </tbody>
            <tbody ng-show="!goals4 && !busy" style="color: red;text-align: center;top: 30px; border-top: none;font-size: 16px;">
                <tr>
                    <td colspan="2">
                        <p style="text-align: center;">没有找到数据~~~!</p>
                    </td>
                </tr>
            </tbody>
            <tfoot ng-show="goalsPage.pageAll >1">
                <tr>
                    <th colspan="2">
                        <div class="ui pagination menu" jspagination page-object="goalsPage" page-func="getGoals" id="goalsList"></div>
                    </th>
                </tr>
            </tfoot>
        </table>
    </div>
    <!-- 年度营销目标 is begining here -->
</div>

<!-- 添加营销目标信息弹出层 is begining here-->
<div class="ui addGoal modal" style="height:auto;">
    <i class="close icon"></i>
    <div class="header_h4">增加{{nowYear}}年份营销信息</div>
    <div class="content">
        <div class="form">
            <form action="#" name="frm-addGoal" id="frm-addGoal" style="margin-left: 30px;">
                <div class="ui form">
                    <div class="inline fluid fields">
                        <div class="field">
                            <label>目标起止时间：</label>
                            <label>{{start | limitTo : 10}}至</label>
                            <label>{{end | limitTo : 10}}</label>
                        </div>
                    </div>
                    <div class="inline fluid fields">
                        <div class="field">
                            <label>营销目标</label>
                            <div class="ui left icon input">
                                <input type="text" name="add_goal" placeholder="营销目标/单位:万" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="actions" style="padding:14px;">
            <div class="center" style="margin-bottom:10px;">
                <div class="ui pop_btn_qd positive">{{'BTN_OK' | translate}}</div>
                <div class="ui pop_btn_qx negative">{{'BTN_CANCEL' | translate}}</div>
            </div>
        </div>
    </div>
</div>
<!-- 添加营销目标信息弹出层 is ending here-->

<!-- 编辑营销目标信息弹出层 is begining here-->
<div class="ui editGoal modal" style="height:auto;">
    <i class="close icon"></i>
    <div class="header_h4">编辑{{nowYear}}年份营销信息</div>
    <div class="content">
        <div class="form">
            <form action="#" name="frm-editGoal" id="frm-editGoal" style="margin-left: 30px;">
                <div class="ui form">
                    <div class="inline fluid fields">
                        <div class="field">
                            <label>目标起止时间：</label>
                            <label>{{start | limitTo : 10}}至</label>
                            <label>{{end | limitTo : 10}}</label>
                        </div>
                    </div>
                    <div class="inline fluid fields">
                        <div class="field">
                            <label>营销目标</label>
                            <div class="ui left icon input">
                                <input type="text" name="edit_goal" placeholder="营销目标" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <div class="actions" style="padding:14px;">
            <div class="center" style="margin-bottom:10px;">
                <div class="ui pop_btn_qd positive">{{'BTN_OK' | translate}}</div>
                <div class="ui pop_btn_qx negative">{{'BTN_CANCEL' | translate}}</div>
            </div>
        </div>
    </div>
</div>
<!-- 编辑营销目标目标信息弹出层 is ending here-->

<!-- 系统信息弹出层 is ending here-->
<div class="ui systemerror modal transition">
    <div class="header_h4">系统提示</div>
    <div class="content">
        <div class="inline fluid fields">
            <div class="field" style="display: inline-block;width: 5%;" ng-show="goalsRcode==1">
                <i class="thumbs up large icon"></i>
            </div>
            <div class="field" style="display: inline-block;width: 5%;" ng-show="goalsRcode==0">
                <i class="thumbs down large icon"></i>
            </div>
            <div class="field" style="display: inline-block;">
                <p>{{goalsMsg}}</p>
            </div>
        </div>
        <div class="actions" style="padding:14px;">
            <div class="center" style="margin-bottom:10px;">
                <div class="ui pop_btn_qx negative">关闭</div>
            </div>
        </div>
    </div>
</div>
<!-- 系统信息弹出层 is ending here-->

<script type="text/javascript">
    $(function() {
        //标签页
        $('.menu .item').tab();
        $('.ui.dropdown').dropdown();
        $('#frm-addGoal').form({
            on: 'blur',
            inline: true,
            fields: {
                add_goal: {
                    identifier: 'add_goal',
                    rules: [{
                        type: 'empty',
                        prompt: '营销目标不能为空不能为空'
                    }]
                }
            }
        });

        $('#frm-editGoal').form({
            on: 'blur',
            inline: true,
            fields: {
                edit_goal: {
                    identifier: 'edit_goal',
                    rules: [{
                        type: 'empty',
                        prompt: '营销目标不能为空不能为空'
                    }]
                }
            }
        });

    });

    $('.ui .icon')
        .popup({
            inline: true
        });
</script>